<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 给定一个数组 [1, 3, 2]。请实现一个自运行函数，按照该数组的元素顺序延迟输出元素的值。
      // 延迟一秒，输出 1 延迟三秒，输出 3 延迟两秒，输出 2

      const arr = [1, 3, 2];

      // 方案三：递归调用
      (function (arr) {
        function next() {
          const cur = arr.shift();

          if (cur) {
            setTimeout(() => {
              console.log("cur", cur);

              next();
            }, cur * 1000);
          }
        }

        next();
      })(arr);

      // 方案二：Promise
      // (async function (arr) {
      //   function sleep(time) {
      //     return new Promise((resolve) => {
      //       setTimeout(() => {
      //         resolve();
      //       }, time);
      //     });
      //   }

      //   for (let i = 0; i < arr.length; i++) {
      //     await sleep(arr[i] * 1000);
      //     console.log(arr[i]);
      //   }
      // })(arr);

      // 方案一：累加延迟时间的方式
      // (function (arr) {
      //   let delay = 0;

      //   for (let i = 0; i < arr.length; i++) {
      //     console.time(`time${i}`);
      //     delay += arr[i];

      //     setTimeout(() => {
      //       console.log("===", arr[i]);
      //       console.timeEnd(`time${i}`);
      //     }, delay * 1000);
      //   }
      // })(arr);

      // (function (arr) {
      //   // 使用 var 定义 i, 会导致setTimeout的回调函数中获取的i是3, 原因这个i是全局的变量。
      //   //    解决该问题
      //   //      1. 用 let 来定义 i
      //   //      2. 给 setTimeout 传递第三个参数
      //   //      3. 将 setTimeout 再通过函数包装一下，采用闭包
      //   for (var i = 0; i < arr.length; i++) {
      //     (function (index) {
      //       setTimeout(() => {
      //         console.log("i", arr[index]);
      //       }, arr[i] * 1000);
      //     })(i);
      //   }
      // })(arr);
    </script>
  </body>
</html>
